<template>
	<view class="page">
		<view class="top"> 
			<image :src="detail.mainPhotoP1"></image>
			<view class="textBox">
				<view class="title">
					<view class="text">
						<text>{{detail.proName}}</text>
					</view>
					<view class="update-count">
										<view class="reduce" @click="changeCount(1)">
										   -
										</view>
										<view class="cart-count">
											{{num}}
										</view>
										<view class="reduce" @click="changeCount(2)">
											+
										</view>
					</view>
					
				</view>
				
				
			</view>
			<view class="typeBox">
				<view class="title">颜色</view>
				<radio-group  class="radioGroup" @change="changeRadio1">
								<label class="typeItem" v-for="(item,index) in detail.skua" :key="index" :class="item.kindNo==skua?'typeItem active':'typeItem'">
									<view class="radio">
										<radio :value="item.kindNo" />
									</view>
									<text>{{item.kindName}}</text>
								</label>
							
				</radio-group>
				<view class="title">尺码</view>
				<radio-group  class="radioGroup" @change="changeRadio2">
								<label class="typeItem" v-for="(item,index) in detail.skub" :key="index" :class="item.kindNo==skub?'typeItem active':'typeItem'">
									<view class="radio">
										<radio :value="item.kindNo" />
									</view>
									<text>{{item.kindName}}</text>
								</label>
				</radio-group>
			</view>
		</view>

		<view class="center">
			<view class="centerBox"  >
				<view class="htmlBox" v-html="detailPhoto"></view>
			</view>
		</view>
		<view class="bottom">
			<text class="price">￥{{totalPrice}}</text>
			<!-- <image src="../../static/zx.png" @click="contact"></image> -->
			<text class="yy" @click="goOrder">立即购买</text>
		</view>
    </view>
</template>

<script setup>
import { fullproinfopage,createorderbygetjson } from '@/common/api.js';
	import {
		onLoad,onShow,
		onReady,
		onShareAppMessage,
		onShareTimeline,onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		reactive,
		toRefs,
		ref,
		getCurrentInstance
	} from 'vue';
   const app = getApp();
	const data = reactive({	
		totalPrice:'',
		params:{},
		detail:{},
		detailPhoto:'',
		typeList:[
			{
				id:0,
				count: 1,
				endTime: "10:00",
				startTime: "09:00",
				status: "1"
			},
			{
				id:1,
				count: 2,
				endTime: "10:00",
				startTime: "09:00",
				status: "1"
			}
		],
		num:1,
		skua:'',
		skuaName:'',
		skub:'',
		skubName:''
	})
	const {params,detail,typeList,chooseId,num,totalPrice,skua,skub,skuaName,skubName,detailPhoto } = toRefs(data);
	onShow(()=>{
		
	})
	onLoad(option => {
		params.value=option
			init();
		
	});
	onReady(() => {
		
	})
	function changeRadio1(e){
		skua.value=e.detail.value
		detail.value.skua.forEach(item=>{
			if(item.kindNo==skua.value){
				skuaName.value=item.kindName
			}
		})
	}
	function changeRadio2(e){
		skub.value=e.detail.value
		detail.value.skub.forEach(item=>{
			if(item.kindNo==skub.value){
				skubName.value=item.kindName
			}
		})
	}
	function changeCount(type){
		if(type==1){
			if(num.value>1){
				num.value--
			}
			
		}else{
			num.value++
		}
		totalPrice.value=Number(detail.value.proPrice)*Number(num.value)
	}
	function init(){
		  let currUser = uni.getStorageSync('currUser')
	  let form={
		  ...params.value,
		  userid:currUser.userid
	  }
	  fullproinfopage(form).then(res=>{
		   detail.value=res.extend.ProInfo
		  totalPrice.value=Number(detail.value.proPrice)*Number(num.value)
		  skua.value=detail.value.skua[0].kindNo
		  skuaName.value=detail.value.skua[0].kindName
		  skub.value=detail.value.skub[0].kindNo
		   skubName.value=detail.value.skub[0].kindName
		   detailPhoto.value=repairRichText(res.extend.ProInfo.detailPhoto)
	  })
	}
	 function onClickItem(e){
	 	current.value = e.currentIndex
	 }
	 function goOrder(){
		 let data={
			 mainPhotoP1:detail.value.mainPhotoP1,
			 proName:detail.value.proName,
			 proId:detail.value.proId,
			 pronum:num.value,
			 price:totalPrice.value,
			 skua:skua.value,
			 skub:skub.value,
			 skuaName: skuaName.value,
			 skubName:skubName.value,
			 ifHotsale:detail.value.ifHotsale
		 }
	 	uni.navigateTo({
	 		url: '/pages/index/recoveryOrder?params='+JSON.stringify(data)
	 	});
	 } 
	 function repairRichText(html) {
	 				// 去掉<img>中style /width / height属性
	 				let newContent = html.replace(/<img[^>]*>/gi, (match) => {
	 					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '')
	 					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '')
	 					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '')
	 					match = match.replace(/style\s*=\s*(["'])(?:(?!\1).)*\1/gi, '') // 去除 style=""这样的属性
	 					return match
	 				})
	 				// 修改所有style里的width属性为max-width:100%
	 				newContent = newContent.replace(/style="[^"]+"/gi, (match) => {
	 					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
	 						'max-width:100%;')
	 					return match
	 				})
	  
	 				// 去掉所有<br/>标签
	 				newContent = newContent.replace(/<br[^>]*\/>/gi, '')
	 				// img标签添加style属性：max-width:100%;height:auto
	 				newContent = newContent.replace(/\<img/gi,
	 					'<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
	 				)
	 				return newContent;
	 }
</script>
<style scope lang="scss">
	view{
		box-sizing: border-box;
	}
	.bottom{
		position: fixed;
		bottom:0;
		left:0;
		width:100%;
		height:100rpx;
		z-index:10;
		background:#fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:0 30rpx;
		border-top:1px solid #f6f6f6;
		image{
			width:70rpx;
			height:70rpx;
			margin-right:30rpx;
		}
		.yy{
			background: #ea6011;
			color:#fff;
			flex:1;
			height:70rpx;
			line-height:70rpx;
			text-align: center;;
		}
	}
	.top{
		margin-bottom:10rpx;
		image{
			width:100%;
			height:500rpx;
			
		}
		.textBox{
			background:#fff;
			padding:40rpx;
			.title{
				
			
				display:flex;
				justify-content: space-between;
				align-items:center;
				color:#ff0b1b;
				.text{
					flex:1;
					 white-space: wrap;
					 font-size:16px;
					 color:#000;
					// margin-bottom:15rpx;
					 font-weight: bold;
					 
				}
				.unit{
					color:#000;
					font-size:12px;
				}
			}
			.disc{
				color:#7c7c7c;
			    font-size:12px;
			}
		}
	}
	.center{
		background:#fff;
		padding-bottom:30rpx;
					margin-bottom:100rpx;
		.centerBox{
			padding:30rpx;

			.content{
				font-size:12px;
				background:#f3f3f3;
				padding:20rpx;
				border-radius: 5px;
			}
		}
	}
	.uni-section-header{
		borderbottom:1px solid #ddd;
	}

	.htmlBox {
		
		width:100%;
		overflow: scroll;
		img {
			max-width: 100%;
		}
	}
	.update-count{
		display:flex;
		justify-content:center;
		align-items:center;
		font-size:14px;
		background:#ea6011;
		color:#fff;
		height:60rpx;
		line-height:60rpx;
		.cart-count{
			background:#f6f6f6;
			color:#ea6011;
			min-width:80rpx;
			text-align:center;
		}
		.reduce{
			width:50rpx;
			text-align:center;
		}
	}
	.radioGroup{
		display: flex;
		flex-wrap: wrap;
		position:relative;
		.radio{
					 //display: none;
					visibility: hidden;
					position:absolute;
		}
	}
	
	.typeItem{
		min-width:120rpx;
		margin-right:2.5%;
		border:1px dashed #ddd;
	    display: flex;
		flex-direction: column;
		text-align:center;
		border-radius:5rpx;
		padding:10rpx 0;
		margin-bottom:15rpx;
		font-size:13px;
		.disabled{
			color:#b6b6b6;
		}
		margin-top:15rpx;
	}
	.typeItem.active{
		border:1px dashed #ea6011;
	   color:#ea6011;
	}
	.typeBox{
		margin-top:20rpx;
		padding:30rpx;
		background:#fff;
	}
	.price{
		width:200rpx;
		 color:#ea6011;
		 font-weight:bold;
		 margin-right:30rpx;
	}
</style>
